<template>
	<!-- , type, , logo_url, link_type, description -->
	<el-dialog v-model="dialogVisible" :title="isAdd ? '新增用户' : '修改用户'" @close="onClose" :close-on-click-modal="false">
		<el-form :model="data.form" :rules="rules" ref="ruleFormRef">
			<el-form-item label="标题" :label-width="formLabelWidth" prop="title"><el-input type="textarea" v-model="data.form.title" placeholder="标题" /></el-form-item>
			<el-form-item label="描述" :label-width="formLabelWidth" prop="description">
				<el-input type="textarea" v-model="data.form.description" placeholder="描述"></el-input>
			</el-form-item>
			<el-form-item label="链接" :label-width="formLabelWidth" prop="url"><el-input v-model="data.form.url" placeholder="链接"></el-input></el-form-item>
			<el-form-item label="链接语言" prop="type" :label-width="formLabelWidth">
				<el-select v-model="data.form.type" placeholder="链接语言">
					<el-option v-for="item in learnType" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="链接类型" prop="link_type" :label-width="formLabelWidth">
				<el-select v-model="data.form.link_type" placeholder="链接类型">
					<el-option v-for="item in linkType" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="图标" prop="logo_url" :label-width="formLabelWidth">
				<el-popover placement="top" :width="388" trigger="click" @show="popoverShow" class="popover">
					<template #reference>
						<div>
							<el-image :src="data.form.logo_url" style="width: 30px;height: 30px;" fit="cover">
								<template #error>
									<div class="image-slot"><Picture />  </div>
								</template>
							</el-image>
						</div>
					</template>
					<el-row v-loading="loading">
						<div class="img-box">
							<el-image
								class="img"
								:src="item.url"
								alt=""
								v-for="(item, index) in imgList"
								:key="item.id"
								@click="setImgUrl(item.url)"
								fit="cover"
							/>
							<div class="img" @click="setImgUrl('')"><Close></Close></div>
							
						</div>
					</el-row>
				</el-popover>
			</el-form-item>
		</el-form>
		<!-- role_name,user_code,user_name,password,phone,email,qq,note,role_id -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import md5 from 'js-md5';
import type { FormInstance } from 'element-plus'
import { ElMessage,ElLoading } from 'element-plus'
import { useMainStore } from '@/store/index.js';
import { storeToRefs } from 'pinia';
import {ref} from 'vue'
//请求
const { proxy } = getCurrentInstance();
import { getCurrentInstance} from 'vue';

//dialogSend hook
import hook from '@/hooks/useDialogSend';
const {open,data,isAdd,ruleFormRef,formLabelWidth,dialogVisible} = hook;
const emits = defineEmits(['closeDialog'])
defineExpose({ open });

//引入piana
const mainStore = useMainStore();
const { linkType,learnType } = storeToRefs(mainStore);



// , type, , logo_url, link_type, description
const rules = {
	title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
	type: [{ required: true, message: '请选择技术类型', trigger: 'blur' }],
	url: [{ required: true, message: '请输入链接地址', trigger: 'blur' }],
	link_type: [{ required: true, message: '请选择链接类型', trigger: 'blur' }],
	description: [{ required: true, message: '请输入链接描述', trigger: 'blur' }],
};

const submitForm = async (formEl: FormInstance | undefined) => {
	console.log(formEl);
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
		let bool = !!data.form.id
		let url = bool?'/link/update':'/link/add'
      proxy
      	.$post(url,{...data.form})
      	.then(res => {
			console.log(res);
      		if(res.code===200){
				ElMessage({
				  message: bool?'修改成功':'添加成功',
				  type: 'success',
				})
				onClose(true)
			}
      	});
    } else {
      console.log('error submit!', fields)
    }
  })
}

function onClose(bool){
	emits('closeDialog',bool)
	dialogVisible.value = false
	data.form = {}
}

const loading = ref(false)
const imgList = ref([])
function popoverShow(){
	console.log('展示');
	if(imgList.value.length){
		return
	}
	loading.value = true
	proxy
		.$get('/img/list')
		.then(res => {
			console.log(res);	
			loading.value = false
			if(res.code === 200){
				imgList.value = res.list
			}
		});
}
function setImgUrl(url){
	data.form.logo_url = url
}
</script>

<style scoped lang="less">
.img-box {
	display: flex;
	flex-wrap: wrap;
	.img {
		width: 30px;
		height: 30px;
		border-radius: 4px;
		border: 1px solid #ccc;
		margin: 5px;
	}
}
.popover .icon{
	font-size: 20px;
	position: absolute;
	top: 0;
	left: 0;	
}
</style>
